<template>
  <div class="rank">
    <nav-bar class="nav-bar">
      <div slot="left">
        <img src="../../assets/img/common/back.svg" alt="" @click="back">
      </div>
      <div slot="center">
        <p>排行榜</p>
      </div>
    </nav-bar>
    <rank-offical class="rank-offical" v-bind:rankoffical="rankoffical"></rank-offical>
    <rank-list :list-item="rankrecommand"><p slot="font">推荐榜</p></rank-list>
    <rank-list :list-item="rankworld"><p slot="font">全球榜</p></rank-list>
    <rank-list :list-item="rankmore"><p slot="font">更多榜单</p></rank-list>
  </div>
</template>

<script>
  import {getRank,Official,Recommend,World,More} from "../../network/rank";
  import NavBar from "../../components/common/navbar/NavBar";
  import RankOffical from "./ChildRank/RankOffical";
  import RankList from "../../components/content/ranklist/RankList";
    export default {
        name: "Rank",
        components:{
            RankOffical,
            RankList,
            NavBar
        },
        data(){
          return{
              rankoffical:[],
              rankrecommand:[],
              rankworld:[],
              rankmore:[],
          }
        },
        methods:{
            back(){
              this.$router.back()
            },
        },
        created() {
          getRank().then(res=>{
              // console.log(res)
              //官方榜
              var Rankoffical = new Official(res.data.list)
              this.rankoffical = Rankoffical.total
              //推荐榜
              var Rankrecommand = new Recommend(res.data.list)
              this.rankrecommand  = Rankrecommand.total
              //全球榜
              var Rankworld = new World(res.data.list)
              this.rankworld = Rankworld.total
              //更多榜单
              var Rankmore = new More(res.data)
              this.rankmore = Rankmore.total
          })
        },

    }
</script>

<style scoped>
  .rank{
    width: 100%;
    /*position: relative;*/
    /*top: -22px;*/
  }

  .nav-bar{
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9;
    background-color: white;
  }

  .rank-offical{
    margin-top: 44px;
  }

  .bar{
    position: absolute;
    z-index: 2;
    top: -44px;
    left: 0;
    width: 100%;
    height: 44px;
    background-color: white;
  }

  .bar-left{
    width: 100px;
    position: absolute;
    left: 20px;
  }

  .bar-left img{
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 10px;
  }

  .bar-left p{
    display: inline-block;
    line-height: 44px;
    font-size: 15px;
    color: black;
    font-weight: 600;
    letter-spacing: 2px;
  }
</style>